<template>
	<view class="order_total">
		<view class="navbar">
			<view class="fixed">
				<!-- 状态栏 时间 电量 信号 -->
				<view :style="{height: navbarStatusHeight+'px'}"></view>
				<!-- #ifdef H5 || APP-PLUS || MP-ALIPAY -->
				<view class="navbar-content">
					<uni-icons type="back" @click="back" color="#fff" size="26" class="back_btn"></uni-icons>
					<view class="navBar">
						<view>工单报表</view>
					</view>
				</view>
				<!-- #endif -->
				<!-- #ifndef H5 || APP-PLUS || MP-ALIPAY -->
				<!-- 胶囊按钮左侧位置 -->
				<view class="navbar-content" :style="{width:'100%',height:navBarHeight+'px'}">
					<uni-icons type="back" @click="back" color="#fff" size="26" class="back_btn"></uni-icons>
					<view class="navBar">
						<view>工单报表</view>
					</view>
				</view>
				<!-- #endif -->
			</view>
			<!-- 设置占位 将微信小程序的状态栏高度预留出来 -->
			<!-- <view :style="{height:navbarStatusHeight+navBarHeight+'px' }"></view> -->
		</view>
		<view class="order_main">
			<view class="order_main_top">
				<view class="order_main_top_left" @click="open">
					<view class="filt_date">
						{{NetworkOrder.dateType==5? NetworkOrder.startTime==NetworkOrder.endTime?NetworkOrder.endTime: NetworkOrder.startTime+'~'+NetworkOrder.endTime:filtList[NetworkOrder.dateType].title}}
						<view class="uniui-down1"></view>
						<view class="uniui-down2"></view>
					</view>
				</view>
				<view class="order_main_top_right" @click="onSearch" v-if="store.state.isManager">
					{{NetworkOrder.networkEmpId?networkEmpIdObj.name:'默认所有成员'}}<uni-icons type="person-filled"
						color="#007cff" size="20"></uni-icons>
				</view>
			</view>

			<view class="order_work">
				<view class="charts-box_type">
					<view class="title">
						<uni-icons size="20" type="circle-filled" class="icon" color="#007cff"></uni-icons> 工单类型占比
					</view>
					<view class="msg_kong" v-if="chartData?.series[0].data.length==0">
						暂无数据
					</view>
					<view class="charts-box_type_data" v-else>
						<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
					</view>
				</view>
				<view class="charts-box_type2">
					<view class="title">
						<uni-icons size="20" type="circle-filled" class="icon" color="#007cff"></uni-icons> 工单分析
					</view>
					<view class="msg_kong" v-if="chartData2?.series[0].data.length==0">
						暂无数据
					</view>
					<view class="charts-box_type_data" v-else>
						<qiun-data-charts type="bar" :opts="opts2" :chartData="chartData2" />
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="popup">
				<view class="popup_top">
					<view class="popup_top_title">
						选择时间
					</view>
					<uni-icons size="28" color="#ccc" type="clear" @click="onClose"></uni-icons>
				</view>
				<view class="list_muen">
					<view v-for="(item,index) in filtList" :key="index" @click="onClickState(item.value)"
						class="list_muen_item">
						<view class="list_muen_item_title" :class="dateType==item.value?'list_muen_item_isactive':''">
							{{item.title}}
						</view>
					</view>
				</view>
				<view class="example-body">
					<uni-datetime-picker v-model="range" :disabled="dateType!=5" rangeSeparator="至" type="daterange"
						@change="changeClick" />
				</view>
				<view class="footer_btn">
					<view class="footer_btn_reset" @click="onReset">
						重置
					</view>
					<view class="footer_btn_confirmation" @click="onConfirmation">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 搜索成员 -->
		<uni-popup ref="popupref" safeArea type="bottom">
			<view class="popup-content">
				<view class="popup-content_title">
					<view class="title_tip">
						成员搜索
					</view>
					<uni-icons type="clear" size="28" color="#ccc" @click="popupref.close()"></uni-icons>
				</view>
				<view class="search_card">
					<uni-search-bar class="search_card_bar" @confirm="search" placeholder="关键词搜索" radius="100"
						bg-color="rgba(242, 243, 245, 1)" cancelButton="none" :focus="true" v-model="selectVo.name"
						@input="input" @clear="clear">
					</uni-search-bar>
					<view class="search_btn">
						搜索
					</view>
				</view>
				<view class="search_muen">
					<view class="msg_kong" v-if="searchValueObj.length==0">
						暂未查询到成员
					</view>
					<view v-for="(item,index) in searchValueObj" :key="index" class="search_muen_item"
						@click="onItem(item)">
						{{item.userName}}
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script lang="ts" setup>
	import {
		ref,
		reactive,
		nextTick, onMounted
	} from "vue"
	import store from '@/store_network/index.js'
	import { onReachBottom, onPullDownRefresh, onUnload, onLaunch, onLoad, onHide } from '@dcloudio/uni-app'
	import apiNetwork from "@/util/network_api/network.js"
	import _ from "lodash"
	const navbarStatusHeight = ref(0)
	const navBarHeight = ref(0)
	const navBarWidth = ref(375)
	onMounted(() => {
		const info = uni.getSystemInfoSync()
		navbarStatusHeight.value = info.statusBarHeight
		// 根据微信小程序的右上侧的胶囊样式 设置导航栏内容的高度
		// 条件编译 以下三个不支持胶囊样式
		// #ifndef H5 || APP-PLUS || MP-ALIPAY
		const menuInfo = uni.getMenuButtonBoundingClientRect()
		// 导航栏内容的高度 = (胶囊底部的高度 - 状态栏的高度) + (胶囊顶部的高度 - 状态栏的高度)
		navBarHeight.value = (menuInfo.bottom - info.statusBarHeight) + (menuInfo.top - info.statusBarHeight)
		// 导航栏内容的宽度  除开胶囊按钮左侧的内容宽度
		navBarWidth.value = menuInfo.left
		// #endif
	})
	const popupref = ref()
	const selectVo = ref({
		"limit": 0,
		"name": "",
		"page": 0
	})

	const onItem = async (item) => {
		let res = {
			name: item.userName,
			id: item.id
		}
		networkEmpIdObj.value = res
		NetworkOrder.value.networkEmpId = res.id
		popupref.value.close()
		//显示加载框
		uni.showLoading({
			title: '加载中',
		});
		await getNetworkOrderModuleStatObj()
		//隐藏加载框
		uni.hideLoading();

	}
	const searchValueObj = ref([])
	// 搜索列表
	const search = async () => {
		uni.showLoading({
			title: "搜索中...",
		})
		selectVo.value.name = selectVo.value.name.trim()
		await apiNetwork.getNetworkMobileEmpList(selectVo.value).then(res => {
			if (res.code == 20000) {
				searchValueObj.value = res.data.rows
			}
		})
		uni.hideLoading()
	}
	const clear = () => {
		selectVo.value.name = ''
		search()
	}
	const input = _.debounce(() => {
		if (!selectVo.value.name) return
		search()
	}, 600)
	const networkEmpIdObj = ref()//搜索人员数据
	onLoad(async () => {
		new Promise(async () => {
			//显示加载框
			uni.showLoading({
				title: '加载中',
			});
			await getNetworkOrderModuleStatObj()
			await getWeekOrderStatObj()
			// //隐藏加载框
			uni.hideLoading();
		})
	})
	onUnload(() => {
		uni.hideLoading()
	})
	// 下拉刷新
	onPullDownRefresh(() => {
		new Promise(async () => {
			//显示加载框
			uni.showLoading({
				title: '加载中',
			});
			await getNetworkOrderModuleStatObj()
			await getWeekOrderStatObj()
			// //隐藏加载框
			uni.hideLoading();
			uni.stopPullDownRefresh()
		})

	})
	const popup = ref()
	const filtList = ref([{ title: '全部', value: 0 }, { title: '今日', value: 1 }, { title: '昨日', value: 2 }, { title: '本周', value: 3 }, { title: '本月', value: 4 }, { title: '自定义范围', value: 5 }])
	const back = () => {
		uni.redirectTo({
			url: '/pages/pages_network/home/home'
		})
	}
	let chartData = ref()
	let chartData2 = ref()
	//您可以通过修改 config-ucharts.js 文件中下标为 ['area'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
	const opts = reactive({
		rotate: false,
		rotateLock: false,
		color: ["#007cFF", "#00c0c0", "#FAC858", "#9A60B4", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#ea7ccc"],
		padding: [5, 5, 5, 5],
		dataLabel: true,
		enableScroll: false,
		legend: {
			show: false,
			position: "bottom",
			lineHeight: 25
		},
		title: {
			name: "",
			fontSize: 15,
			color: "#666666"
		},
		subtitle: {
			name: "",
			fontSize: 25,
			color: "#7cb5ec"
		},
		extra: {
			ring: {
				ringWidth: 26,
				activeOpacity: 0.5,
				activeRadius: 10,
				offsetAngle: 20,
				labelWidth: 15,
				border: false,
				borderWidth: 3,
				borderColor: "#FFFFFF"
			}
		}
	})
	const opts2 = reactive({
		color: ["#007cFF", "#00c0c0", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
		padding: [15, 10, 5, 2],
		enableScroll: false,
		legend: {},
		xAxis: {
			boundaryGap: "justify",
			disableGrid: false,
			min: 0,
			axisLine: false,
			max: 2
		},
		yAxis: {},
		extra: {
			bar: {
				type: "group",
				width: 40,
				meterBorde: 1,
				meterFillColor: "#FFFFFF",
				activeBgColor: "#000000",
				activeBgOpacity: 0.08,
				linearType: "none",
				barBorderCircle: true,
				seriesGap: 4,
				categoryGap: 2
			}
		}
	})
	const NetworkOrder = ref({
		"dateType": 4,//搜索日期类型：1-今天，2-昨天，3-本周，4-本月，5-自定义时间范围
		"endTime": "",
		"networkEmpId": null,//服务商人员ID
		"startTime": ""
	})

	const end_start_Time = ref([])
	const dateType = ref(4)
	// 工单类型占比
	const getNetworkOrderModuleStatObj = async () => {
		let resObj = {
			series: [{ data: [] }]
		}
		let data = _.cloneDeep(NetworkOrder.value)
		data.dateType === 0 ? data.dateType = null : data.dateType = data.dateType
		await apiNetwork.getNetworkOrderModuleStat(data).then(res => {
			resObj.series[0].data = res.data.row.orderModuleStat.map(o => {
				return { name: o.name, value: o.qty }
			})
			chartData.value = JSON.parse(JSON.stringify(resObj));
		})
	}
	// 工单分析
	const getWeekOrderStatObj = async () => {
		let resObj = {
			categories: [],
			series: [{ name: "新增", data: [] }, { name: "完成", data: [] }]
		}
		await apiNetwork.getWeekOrderStat().then((res) => {
			if (res.code == 20000) {
				resObj.series[0].data = res.data.row.todayCreateOrder.map(o => {
					resObj.categories.push(o.date.replace(/-/g, "/"))
					return o.qty ? o.qty : ''
				})
				resObj.series[1].data = res.data.row.todayFinishOrder.map(o => {
					return o.qty ? o.qty : ''
				})
				let max1 = Math.max.apply(null, resObj.series[0].data); //获取最大值
				let max2 = Math.max.apply(null, resObj.series[1].data); //获取最大值
				let max = Math.max.apply(null, [max1, max2]) + Math.max.apply(null, [max1, max2]) % 5
				opts2.xAxis.max = Math.ceil(max / 5) * 5
				chartData2.value = JSON.parse(JSON.stringify(resObj));
			}
		})
	}
	const open = () => {
		dateType.value = NetworkOrder.value.dateType
		popup.value.open()
	}
	// 打开搜索弹窗
	const onSearch = () => {
		search()
		popupref.value.open()
	}
	const onClose = () => {
		popup.value.close()
	}
	const onClickState = (value) => {
		dateType.value = value
	}
	const range = ref()
	const changeClick = (val) => {
		end_start_Time.value = val
	}
	// 重置
	const onReset = () => {
		dateType.value = 4
		end_start_Time.value = []
		range.value = ''
	}
	// 确认
	const onConfirmation = () => {
		if (dateType.value === 5 && end_start_Time.value.length == 0) {
			uni.showToast({
				title: '请选择时间范围',
				icon: 'none'
			})
			return
		}
		NetworkOrder.value.dateType = dateType.value
		if (dateType.value === 5) {
			NetworkOrder.value.startTime = end_start_Time.value[0]
			NetworkOrder.value.endTime = end_start_Time.value[1]
		} else {
			NetworkOrder.value.startTime = ''
			NetworkOrder.value.endTime = ''
		}
		getNetworkOrderModuleStatObj()
		popup.value.close()
	}
</script>

<style lang="scss" scoped>
	.order_total {
		width: 100%;
		height: 100vh;
		background-image: url('@/static/network/bg_main.png');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: top;
		overflow: hidden;
		display: flex;
		flex-direction: column;

		.fixed {
			// position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			width: 100%;

			.navbar-content {
				position: relative;
				display: flex;
				align-items: center;
				width: 100%;
				height: 80rpx;

				.back_btn {
					margin-left: 24rpx;
					position: relative;
					z-index: 9;
				}

				.navBar {
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					position: absolute;
					top: 0;
					bottom: 0;
					width: 100%;
					height: 100%;
					font-size: 32rpx;
					font-weight: bold;
					color: #fff;
				}
			}
		}

		.order_main {
			padding: 20rpx 32rpx 20rpx;
			display: flex;
			flex-direction: column;
			flex: 1;
			overflow: hidden;

			&_top {
				display: flex;
				align-items: center;
				justify-content: space-between;

				&_left {
					display: inline-block;

					.filt_date {
						font-size: 24rpx;
						display: flex;
						align-items: center;
						font-weight: bold;

						.uniui-down1 {
							width: 0;
							height: 0;
							border-left: 12rpx solid transparent;
							border-top: 12rpx solid #000;
							margin-left: 8rpx;
						}

						.uniui-down2 {
							width: 0;
							height: 0;
							border-right: 12rpx solid transparent;
							border-top: 12rpx solid #000;
						}
					}
				}

				&_right {
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #fff;
					border-radius: 10rpx;
					font-size: 22rpx;
					padding-left: 8rpx;
					padding-right: 4rpx;
					height: 50rpx;
					font-weight: bold;
				}
			}
		}

		.order_work {
			display: flex;
			flex-direction: column;
			flex: 1;
			overflow: auto;
			margin-top: 12rpx;
			/* 隐藏默认的滚动条样式 */
			scrollbar-width: none;
			/* Firefox */
			-ms-overflow-style: none;

			/* IE and Edge */
			&::-webkit-scrollbar {
				width: 0;
				height: 0;
				background-color: transparent;
			}

			.charts-box_type {
				background-color: #fff;
				border-radius: 20rpx;
				margin: 24rpx 0;
				padding: 24rpx 24rpx 0;
				height: 36vh;

				.msg_kong {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 80%;
					font-size: 28rpx;
					color: #999;
				}

				.title {
					display: flex;
					align-items: center;
					font-size: 30rpx;
					font-weight: bold;

					.icon {
						font-weight: normal;
					}
				}

				.charts-box_type_data {
					width: 100%;
					height: 32vh;
				}
			}

			.charts-box_type2 {
				background-color: #fff;
				border-radius: 20rpx;
				margin: 24rpx 0;
				padding: 24rpx 24rpx 0;
				height: 38vh;

				.msg_kong {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 80%;
					font-size: 28rpx;
					color: #999;
				}

				.title {
					display: flex;
					align-items: center;
					font-size: 30rpx;
					font-weight: bold;

					.icon {
						font-weight: normal;
					}
				}

				.charts-box_type_data {
					width: 100%;
					height: 36vh;
				}
			}
		}

		.popup {
			height: 600rpx;
			background-color: #fff;
			padding: 22rpx 24rpx;
			border-radius: 20rpx 20rpx 0 0;
			position: relative;

			&_top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;

				&_title {
					font-weight: bold;
					font-size: 28rpx;
				}
			}

			.list_muen {
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				&_item {
					width: calc(100%/3);
					display: flex;
					align-items: center;
					justify-content: center;

					&_title {
						background: rgba(238, 238, 238, 1);
						margin: 20rpx;
						width: 80%;
						padding: 14rpx 0;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 28rpx;
						border-radius: 10rpx;
					}

					&_isactive {
						background-color: #007cff;
						color: #fff;
					}
				}
			}

			.example-body {
				margin: 40rpx 20rpx;

				&_tip {
					color: rgba(245, 108, 108, 1);
					font-size: 24rpx;
					margin: 20rpx 0;
				}
			}

			.footer_btn {
				display: flex;
				align-items: center;
				padding: 50rpx 40rpx 40rpx;
				position: absolute;
				bottom: 0;
				right: 0;
				left: 0;

				&_reset {
					height: 80rpx;
					color: #007cff;
					background: rgba(242, 249, 255, 1);
					width: 26%;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				&_confirmation {
					height: 80rpx;
					color: #fff;
					background-color: #007cff;
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-left: 32rpx;
				}
			}
		}

		.popup-content {
			height: 86vh;
			background-color: #FFFFFF;
			margin: 0 auto;
			border-radius: 20rpx 20rpx 0 0;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			flex: 1;

			&_title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 24rpx 24rpx 0;

				.title_tip {
					font-size: 32rpx;
					font-weight: bold;
				}
			}

			.search_card {
				display: flex;
				align-items: center;
				margin: 0 24rpx;

				&_bar {
					flex: 1;
				}

				.search_btn {
					font-size: 28rpx;
					color: #007cff;
					font-weight: bold;
				}
			}

			.search_muen {
				flex: 1;
				overflow: auto;
				margin: 24rpx;

				&_item {
					font-size: 30rpx;
					border-bottom: 2rpx solid rgba(242, 243, 245, 1);
					padding: 32rpx;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}

				.msg_kong {
					color: #999;
					font-size: 32rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin: auto;
					height: 80%;
				}
			}
		}
	}
</style>